<script setup>
import { ref, reactive } from 'vue'
import { userLogin, userRegister } from '@/api/user'
import { ElMessage } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import useUserStore from '@/pinia/userInfo'
import md5 from 'md5'
const userStore = useUserStore()
const loginStatus = ref(false)
const { showLoginDialog } = storeToRefs(userStore)
const state = reactive({
  name: '',
  password: '',
  newPassword: ''
})
const type = ref('login')
/**
 * @description 先判断用户是否在其他地方登录
 */
let loginLoading = false
const login = async () => {
  if (state.name && state.password) {
    const timestamp = new Date().getTime()
    const password = md5(md5(state.password) + String(timestamp))
    if (loginLoading) return
    loginLoading = true
    try {
      const { data } = await userLogin({
        name: state.name,
        password,
        timestamp,
        webrtc: true,
        type: 1
      })
      userStore.setState({
        token: data.token,
        userInfo: {
          ...data
        }
      })
      ElMessage.success('登录成功')
      window.localStorage.setItem('userLogin', 'ok')
      showLoginDialog.value = false
    } catch (err) {
      ElMessage({
        type: 'error',
        message: err.msg || '用户名或密码错误',
        grouping: true
      })
    }
    setTimeout(() => {
      loginLoading = false
    }, 1500)
  }
}

/**
 * @description 用户注册
 */
const register = async () => {
  if (state.name && state.password && state.newPassword) {
    if (state.password !== state.newPassword) {
      ElMessage({
        type: 'error',
        message: '两次密码输入不一致',
        grouping: true
      })
      return
    }
    try {
      await userRegister({
        ...state
      })
      ElMessage({
        type: 'success',
        message: '注册成功',
        grouping: true
      })
      type.value = 'login'
    } catch (err) {
      ElMessage({
        type: 'error',
        message: err.msg,
        grouping: true
      })
    }
  }
}
</script>
<template>
  <div
    class="absolute w-[100vw] h-[100vh] bg-[#000] bg-opacity-60 flex items-center justify-center z-[999]"
  >
    <div
      class="flex flex-col relative user-login w-[400px] border-[1px] border-[#fff] border-opacity-10 p-[40px_20px] rounded-lg"
    >
      <div
        class="absolute z-[99] right-[10px] top-[10px] cursor-pointer hover:scale-110"
        @click="showLoginDialog = false"
      >
        <el-icon color="#666" size="18">
          <Close />
        </el-icon>
      </div>
      <div class="space-y-[30px]" v-show="type === 'login'">
        <div class="text-[24px] tracking-[2px] text-[#fff] text-opacity-70">账号登录</div>
        <el-input
          v-model="state.name"
          placeholder="请输入用户名"
          :input-style="{ height: '38px' }"
          @keyup.enter="login"
        >
          ></el-input
        >
        <el-input
          type="password"
          v-model="state.password"
          placeholder="请输入密码"
          :input-style="{ height: '38px' }"
          @keyup.enter="login"
        >
          ></el-input
        >
        <div class="text-center text-[#999]" v-if="loginStatus">
          检测到您的账号在其他设备已登录，继续登录会影响其他设备正在进行的游戏，是否继续登录？
        </div>
        <div
          v-if="!loginStatus"
          class="h-[48px] btn-primary rounded-lg text-[18px] cursor-pointer"
          @click="login"
          style="border-radius: 100px"
        >
          登录
        </div>
        <div
          v-if="loginStatus"
          class="h-[48px] btn-primary rounded-lg text-[18px] cursor-pointer"
          @click="login"
          style="border-radius: 100px"
        >
          继续登录
        </div>
        <div class="text-center text-[#999] cursor-pointer" @click="type = 'register'" v-if="false">
          用户注册
        </div>
      </div>
      <div class="space-y-[30px]" v-show="type === 'register'">
        <div class="text-[24px] tracking-[2px] text-[#fff] text-opacity-70">用户注册</div>
        <el-input
          v-model="state.name"
          placeholder="请输入用户名"
          :input-style="{ height: '38px' }"
          @keyup.enter="login"
        >
          ></el-input
        >
        <el-input
          type="password"
          v-model="state.password"
          placeholder="请输入密码"
          show-password
          :input-style="{ height: '38px' }"
          @keyup.enter="login"
        >
          ></el-input
        >
        <el-input
          type="password"
          v-model="state.newPassword"
          placeholder="请再次输入密码"
          show-password
          :input-style="{ height: '38px' }"
          @keyup.enter="login"
        >
          ></el-input
        >
        <div
          class="h-[48px] btn-primary rounded-lg text-[18px] cursor-pointer"
          @click="register"
          style="border-radius: 100px"
        >
          注册
        </div>
        <div class="text-center text-[#ccc] cursor-pointer" @click="type = 'login'">用户登录</div>
      </div>
    </div>
    <div class=""></div>
  </div>
</template>

<style scoped lang="scss">
.user-login {
  background: #1b1d2a;
  :deep(.el-input__wrapper) {
    background: transparent;
    box-shadow: none;
    border: 1px #444 solid;
    box-shadow: none !important;
  }
}
</style>
